import React from 'react';
import {Card, CardActionArea, CardActions, CardContent, CardMedia, Skeleton, Typography} from "@mui/material";
import {Navigate} from 'react-router-dom'
import PubSub from "pubsub-js";

export default class MusicCard extends React.Component {
    constructor(props) {
        super(props);
        if(props.loading){
            this.state = {
                loading:props.loading,
            }
        }else {
            this.state = {
                ...props,
                go:false
            }
        }

    }

    errorImg = (e) => {
        e.target.src = './listico.png'
    }
    toPlayList = () => {
        if(this.props.changePage){
            //消息发布
            PubSub.publish('changeListPage',this.state)
            this.state.go = false;
            return ""
        }else {
            this.state.go = false;
        return <Navigate to='/playlist' state={{id:this.state.id,from:this.state.from,auth:this.state.auth,allList:this.props.allList}}/>
        }
    }
    togo = () => {
        if(!this.state.loading)
            this.setState({go:true})
    }

    render() {
        let {loading} = this.state

        let fromIcon;
        if(this.state.from === "163"){
            fromIcon = './ico163.png';
        }else if(this.state.from === "qq"){
            fromIcon = './icoqq.png';
        }
        else if(this.state.from === "kugou"){
            if(this.state.imgUrl !== undefined) {
                this.state.imgUrl = this.state.imgUrl.replace("{size}", "150");
                fromIcon = './icokugou.png';
            }
        }
        else if(this.state.from === "migu"){
            fromIcon = './icomigu.png';
        }
        else if(this.state.from === "kuwo"){
            fromIcon = './icokuwo.png';
        }

        return (
            <div>
                <Card sx={this.props.changePage?{ minWidth: 400,maxWidth: 400,marginTop:1 }:{ minWidth:300,maxWidth: 300,marginTop:1 }}>
                    <CardActionArea onClick={this.togo}>
                        {loading ? (
                            <Skeleton sx={{ height: 220 , width:300}} animation="wave" variant="rectangular" />
                        ) : (
                        <CardMedia
                            component="img"
                            height="194"
                            image={this.state.imgUrl}
                            alt="face"
                            onError={this.errorImg}

                        />)}
                        <CardContent>
                            {loading ? (
                                <React.Fragment>
                                    <Skeleton animation="wave" height={20} style={{ marginBottom: 6 }} />
                                    <Skeleton animation="wave" height={20} style={{ marginBottom: 10 }} />
                                    <Skeleton animation="wave" height={10} width="80%" />
                                </React.Fragment>
                            ) : (
                                <>
                                    <Typography height='64px' gutterBottom variant="h6" component="div">
                                        {this.state.name}
                                    </Typography>
                                    <Typography variant="body2" color="text.secondary" sx={{overflow:'auto'}} maxHeight={20}>
                                        {"by  "+this.state.auth}
                                    </Typography>
                                </>
                                )
                            }
                        </CardContent>
                    </CardActionArea>
                    <CardActions disableSpacing>
                        {
                            loading ? (
                                <Skeleton animation="wave" variant="circular" width={16} height={16} />
                            ) : (
                                <img src={fromIcon} width='16px' height='16px'/>
                            )
                        }
                    </CardActions>
                </Card>
                {this.state.go?this.toPlayList():""}
            </div>
        );
    }
}
